<template>
    <main-wrap :loading="true" :load="getList" :end="finished" :overText="lists.length==0 ? ' ':''">
        <template v-slot:header>
            <sm-search @search="doSearch" :curUserid="pmUserid"/>
        </template>
        <ul class="mList">
            <li v-for="dt in lists" :key="dt.moment_id">
                <a>
                    <div class="con">
                        <div class="imgbox" v-if="dt.image && dt.image.length>0">
                            <span v-for="dt2 in dt.image">
                                <Image url="https://wx.qlogo.cn/mmhead/FMajU52WvbFiay39pSujpTAVuRYAP1h7x4s95V1zwrgeFKohtjficBog/0"/>
                                <!-- <img src="https://wx.qlogo.cn/mmhead/FMajU52WvbFiay39pSujpTAVuRYAP1h7x4s95V1zwrgeFKohtjficBog/0"/> -->
                            </span>
                        </div>
                        <div class="txt">{{dt.text.content}}</div>
                    </div>
                    <div class="dec">{{timestampFormat(dt.create_time,'YYYY-MM-DD hh:mm')}} 张通榆 发表</div>
                </a>
            </li>
        </ul>
        <van-empty  v-if="lists && lists.length==0" description="暂无数据" />
        <!-- <template v-slot:footer>
            <footer-nav/>
        </template> -->
    </main-wrap>
</template>
<script setup>
import { ref,onMounted,nextTick } from "vue";
import {useRouter} from 'vue-router'
import moment from 'moment'
import Image from "@/components/image.vue"
import {get_groupmsg_list} from '@/api/qy-wechat-api'
import {toast,loading,clearToast} from '@/utils/vant'
import { useUserStore } from '@/stores/modules/user'
import mainWrap from '@/components/mainWrap.vue'
import footerNav from '@/components/footerNav.vue'
import smSearch from "./components/smSearch.vue"
import {timestampFormat} from '@/utils/convert'

const router = useRouter()
const userStore = useUserStore()

const lists = ref('')
let pageSize = 20
let cursor = ref('') // 腾讯接口游标
const searchParams = ref({
    chat_type:'single'
}) // isUsable:true只看可用的客户（即没有删除的用户）
const finished = ref(false)
const today = ref('')
const pmUserid = ref('')

onMounted(async ()=>{
    today.value = moment().format('YYYY-MM-DD')
    const {currentRoute} = router
    if(currentRoute._value.query.userid){
        pmUserid.value = currentRoute._value.query.userid
        searchParams.value.creator = currentRoute._value.query.userid
    }
    getList()
})


const getList = async ()=>{
    const modifiedDate = moment().subtract(29, 'days').format('YYYY-MM-DD'); //将当前日期减去29天
    const today = moment().format('YYYY-MM-DD')
    return new Promise((resolve, reject) => {
        setTimeout(async () => {
            const res = await get_groupmsg_list({
                start_time:moment(`${modifiedDate} 00:00:01`).unix(),
                end_time:moment(`${today} 23:59:59`).unix(),
                cursor:cursor.value,
                limit:pageSize,
                ...searchParams.value
            })
            lists.value = [...lists.value, ...res.data.group_msg_list];
            cursor.value = res.data.next_cursor
            if (lists.value && !res.data.next_cursor) {
              finished.value = true;
            }
            resolve(true);
        }, 500);
    });
}

const doSearch = (obj)=>{
    console.log("obj:",obj)
    for (const key in obj) {
        if (obj[key]) {
            searchParams.value[key] = obj[key] 
        }
    }
    // if(obj.creator){
    //     searchParams.value.creator = obj.creator
    // }else{
    //     delete searchParams.value.creator
    // }
    // if(obj.filter_type){
    //     searchParams.value.filter_type = obj.filter_type
    // }else{
    //     delete searchParams.value.filter_type
    // }
    lists.value = ''
    getList()
}

</script>

<style lang="scss" scoped>
.mList{
    padding: 10px 0 0 0;
    margin: 0;
    list-style: none;
    li{
        padding: 0 0 10px 0;
        a{
            display: block;
            background-color: #fff;
            padding: 20px;
            .con{
                font-size: 28px;
                color: #000;
                .imgbox{
                    display: flex;
                    padding: 0 0 10px 0;
                    flex-wrap: wrap;
                    span{
                        width: 130px;
                        height: 130px;
                        margin: 0 7px 7px 0;
                    }
                }
            }
            .dec{
                font-size: 24px;
                color: #999;
                margin: 20px 0 0 0;
            }
        }
    }
}

</style>